<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Analog+Digital Clock</title>
  <link rel="stylesheet" href="style.css">
  <script src="index.js"></script>
</head>

<body>
  <div class="clock">
    <div class="hour">
      <div class="hr" id="hr"></div>
    </div>
    <div class="min">
      <div class="mn" id="mn"></div>
    </div>
    <div class="sec">
      <div class="sc" id="sc"></div>
    </div>
  </div>

  <div class="wrapper">
    <div class="display">
      <div id="time"></div>
    </div>
    <span></span>
    <span></span>
  </div>
  <div class="wrapper">
    <div class="display">
      <div id="calendar"></div>
    </div>
    <span></span>
    <span></span>
  </div>

  <script>
    setInterval(() => {
      const time = document.querySelector(".display #time");
      const calendar = document.querySelector(".display #calendar");
      const weekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
      const monthDays = ["Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec"];

      let date = new Date();

      var day = date.getDay();
      var date1 = date.getDate();
      var month = date.getMonth();
      var year = date.getFullYear();

      let hours = date.getHours();
      let minutes = date.getMinutes();
      let seconds = date.getSeconds();

      let day_night = "AM";
      if (hours >= 12) {
        day_night = "PM";
        hours = hours - 12;
        // hours = hours % 12 || 12;
      }
      if (seconds < 10) {
        seconds = "0" + seconds;
      }
      if (minutes < 10) {
        minutes = "0" + minutes;
      }
      if (hours < 10) {
        hours = "0" + hours;
      }
      time.textContent = hours + ":" + minutes + ":" + seconds + " " + day_night;
      calendar.textContent = weekDays[day] + ", " + date1 + " " + monthDays[month] + " " + year;
    });
  </script>
</body>
</html>